<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务列表</title>
    <link rel="stylesheet" href="./assets/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./assets/css/base.css">
    <link rel="stylesheet" href="./assets/font/iconfont.css">
</head>

<body>
    <header class="header-bar">
        <nav class="bar-link">
            <div class="city">城市：<span>南京</span></div>
            <ul class="btns">
                <li class="user-info">
                    <span>张三</span>
                    <a href="./back-manager.html">[ 个人中心 ]</a>
                    <a href="#">[ 退出登录 ]</a>
                </li>
                <li><a href="./action.html#register">注册</a></li>
                <li><a href="./action.html#login">登录</a></li>
                <li><a href="./index.html">首页</a></li>
                <li>
                    商户推广
                    <i class="iconfont icon-arrow-down"></i>
                    <ul class="down-list-box">
                        <!-- 通过锚点快速定位 -->
                        <li><a href="./vip.html#level1">VIP-体验版</a></li>
                        <li><a href="./vip.html#level2">VIP-初级版</a></li>
                        <li><a href="./vip.html#level3">VIP-中级版</a></li>
                        <li><a href="./vip.html#level4">VIP-高级版</a></li>
                    </ul>
                </li>
                <li><a target="_black" href="https://www.itany.com">联系客服</a></li>
                <li><a target="_black" href="https://www.itany.com">帮助</a></li>
            </ul>
        </nav>
    </header>

    <div class="service-topbar">
        <div class="main-box">
            <div class="logo">
                <img src="./assets/img/logo-c.png" alt="" srcset="">
            </div>
            <div class="search">
                <div class="input-bar">
                    <input class="search-input" type="text" placeholder="求职找房找服务">
                    <span class="icon-search"></span>
                </div>
            </div>
            <div class="release">
                <!-- base.js 中完成动态事件绑定，请自行填充登录验证代码 -->
                <span class="release-btn" id="publishingService">免费发布服务信息</span>
            </div>
        </div>
    </div>

    <main class="service-list-box main-box">
        <ul class="page-breadcrumbs">
            <!-- 后续可以自行添加 -->
            <li>南京网博</li>
            <li>本地生活服务</li>
            <li>汽车</li>
            <li>南京驾校</li>
        </ul>
        <nav class="service-type">
            <!-- 后续按照下述结构可自行添加 -->
            <dl>
                <dt>服务内容</dt>
                <dd>不限</dd>
                <dd>B2大型货车</dd>
                <dd class="active">A2牵引车</dd>
                <dd>A大型客车</dd>
                <dd>A3城市公交车</dd>
                <dd>B1中型客车</dd>
                <dd>C1手动档</dd>
                <dd>C2自动挡</dd>
                <dd>C3载货汽车</dd>
                <dd>C4三轮汽车</dd>
                <dd>C5残疾人专用</dd>
                <dd>E二轮摩托车</dd>
                <dd>D三轮摩托车</dd>
                <dd>F轻便摩托车</dd>
                <dd>其他</dd>
            </dl>
            <dl>
                <dt>服务范围</dt>
                <dd>全南京</dd>
                <dd>江宁</dd>
                <dd>鼓楼</dd>
                <dd class="active">浦口</dd>
                <dd>玄武</dd>
                <dd>建邺</dd>
                <dd>白下</dd>
                <dd>秦淮</dd>
                <dd>栖霞</dd>
                <dd>雨花台</dd>
                <dd>高淳</dd>
                <dd>六合</dd>
                <dd>溧水</dd>
                <dd>下关</dd>
                <dd>大厂</dd>
            </dl>
        </nav>
        <div class="service-body">
            <div class="content-left" id="serviceListData">
                <div class="left-title">
                    <span class="title-name">南京驾校服务</span>
                    <dl class="sort-btn">
                        <dt>排序：</dt>
                        <dd class="active">默认</dd>
                        <dd>最新</dd>
                    </dl>
                </div>
                <div class="left-list">
                    <div class="left-item">
                        <img src="./assets/img/list/img.jpg" alt="" srcset="">
                        <p class="vip-1">
                            <a href="./detail.html">本地增驾AB证，自有考场考训一体化，快速拿证证，自有考场考训一体化，快速拿证</a>
                        </p>
                        <p>服务区域：浦口</p>
                        <p>发布时间：2022年03月06日</p>
                        <a class="contact" href="./detail.html">联系商家</a>
                    </div>
                    <div class="left-item">
                        <img src="./assets/img/list/img.jpg" alt="" srcset="">
                        <p class="vip-2">
                            <a href="./detail.html">本地增驾AB证，自有考场考训一体化，快速拿证证</a>
                        </p>
                        <p>服务区域：浦口</p>
                        <p>发布时间：2022年03月06日</p>
                        <a class="contact" href="./detail.html">联系商家</a>
                    </div>
                    <div class="left-item">
                        <img src="./assets/img/list/img.jpg" alt="" srcset="">
                        <p class="vip-3">
                            <a href="./detail.html">本地增驾AB证，自有考场考训一体化，快速拿证证</a>
                        </p>
                        <p>服务区域：浦口</p>
                        <p>发布时间：2022年03月06日</p>
                        <a class="contact" href="./detail.html">联系商家</a>
                    </div>
                    <div class="left-item">
                        <img src="./assets/img/list/img.jpg" alt="" srcset="">
                        <p class="vip-4">
                            <a href="./detail.html">本地增驾AB证，自有考场考训一体化，快速拿证证</a>
                        </p>
                        <p>服务区域：浦口</p>
                        <p>发布时间：2022年03月06日</p>
                        <a class="contact" href="./detail.html">联系商家</a>
                    </div>
                    <div class="left-item">
                        <img src="./assets/img/list/img.jpg" alt="" srcset="">
                        <p>
                            <a href="./detail.html">本地增驾AB证，自有考场考训一体化，快速拿证证</a>
                        </p>
                        <p>服务区域：浦口</p>
                        <p>发布时间：2022年03月06日</p>
                        <a class="contact" href="./detail.html">联系商家</a>
                    </div>
                    <div class="left-item">
                        <img src="./assets/img/list/img.jpg" alt="" srcset="">
                        <p>
                            <a href="./detail.html">本地增驾AB证，自有考场考训一体化，快速拿证证</a>
                        </p>
                        <p>服务区域：浦口</p>
                        <p>发布时间：2022年03月06日</p>
                        <a class="contact" href="./detail.html">联系商家</a>
                    </div>
                    <div class="left-item">
                        <img src="./assets/img/list/img.jpg" alt="" srcset="">
                        <p>
                            <a href="./detail.html">本地增驾AB证，自有考场考训一体化，快速拿证证</a>
                        </p>
                        <p>服务区域：浦口</p>
                        <p>发布时间：2022年03月06日</p>
                        <a class="contact" href="./detail.html">联系商家</a>
                    </div>
                </div>
                <div class="left-bottom">
                    <!-- 分页器 -->
                    <span>分页器-自行选择</span>
                </div>
            </div>
            <div class="content-right" id="serviceShopData">
                <div class="right-title">
                    <p>热门商家</p>
                    <a href="./vip-list.html">更多</a>
                </div>
                <div class="right-list">
                    <div class="right-item">
                        <a href="./vip-list.html">
                            <img src="./assets/img/list/img.jpg" alt="" srcset="">
                            <p>石佛寺驾校</p>
                        </a>
                    </div>
                    <div class="right-item">
                        <a href="./vip-list.html">
                            <img src="./assets/img/list/img.jpg" alt="" srcset="">
                            <p>石佛寺驾校</p>
                        </a>
                    </div>
                    <div class="right-item">
                        <a href="./vip-list.html">
                            <img src="./assets/img/list/img.jpg" alt="" srcset="">
                            <p>石佛寺驾校</p>
                        </a>
                    </div>
                    <div class="right-item">
                        <a href="./vip-list.html">
                            <img src="./assets/img/list/img.jpg" alt="" srcset="">
                            <p>石佛寺驾校</p>
                        </a>
                    </div>
                    <!-- 最多显示4个 -->
                    <div class="right-item">
                        <a href="./vip-list.html">
                            <img src="./assets/img/list/img.jpg" alt="" srcset="">
                            <p>石佛寺驾校</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer-bar">
        <div class="main-box">
            <img src="./assets/img/logo.png" alt="" srcset="">
            <div>
                <p>夫子庙校区：南京市秦淮区龙蟠中路458号通济产业园北区2栋1层</p>
                <p>Copyright (C) 2002-2019 itany.com 南京市网博优壹职业培训学校 苏ICP备 苏ICP备1606</p>
            </div>
            <i class="record rec1"></i>
            <i class="record rec2"></i>
            <i class="record rec3"></i>
            <i class="record rec4"></i>
            <i class="record rec5"></i>
        </div>
    </footer>

    <!-- 弹出插件 -->
    <script src="./assets/plugins/coco-modal.js"></script>
    <!-- 页面基础共享JS加载 -->
    <script src="./assets/js/base.js"></script>
    <!-- 当前页面独享JS加载 -->
    <script src="./assets/js/pages/list.js"></script>
</body>

</html>